/* 图表页面思路分析: 从左往右,从上往下依次加载图表数据
1.班级概览
2.学生信息列表
    折线图 :  x轴：姓名   y轴：期望薪资+实际薪资
    饼图 ： 省份信息
    地图 ： 县信息

3.学生成绩列表
    柱状图 :  x轴：小组   y轴：分数成绩

4.点击柱状图右上角三个小点,可以实现 切换成绩效果
*/

// 1.班级概览
// ajax发送get请求
axios({
  method: 'get',
  url: '/student/overview',
}).then(res => {
  // 响应请求
  console.log(res)
  // 渲染数据
  document.querySelector('.total').innerHTML = res.data.data.total
  document.querySelector('.avgAge').innerHTML = res.data.data.avgAge
  document.querySelector('.avgSalary').innerHTML = res.data.data.avgSalary
  document.querySelector('.proportion').innerHTML = res.data.data.proportion
})

/* 
2.学生信息列表
    折线图 :  x轴：姓名   y轴：期望薪资+实际薪资
    饼图 ： 省份信息
    地图 ： 县信息
 */
// ajax发送get请求
axios({
  method: 'get',
  url: '/student/list',
}).then(res => {
  // 响应请求
  console.log(res)
  // 处理数据
  // 折线图数据
  const lineData = {
    names: [],
    salarys: [],
    truesalarys: []
  }
  // 饼图数据
  const pieData = []
  // 地图数据
  const chinaGeoCoordMap = {
    "武汉校区": [114.3896, 30.6628],
  }
  const chinaDatas = []
  // 循环遍历返回的数据数组分别存入对应的形参
  res.data.data.forEach(item => {
    // 折线图
    lineData.names.push(item.name)
    lineData.salarys.push(item.salary)
    lineData.truesalarys.push(item.truesalary)
    // 饼图
    // 找到返回的数据数组中省份在饼图数据中的下标
    const index = pieData.findIndex(item1 => item1.name === item.province)
    // 如果为-1说明并与数据数组中没有出现过这个省份就value赋值为1 如果不为-1说明出现过就直接value++
    if (index === -1) {
      pieData.push({ value: 1, name: item.province })
    } else {
      pieData[index].value++
    }
    // 地图
    chinaGeoCoordMap[item.county] = [item.jing, item.wei]
    // 找到返回的数据数组中区/县在地图数据中的下标
    const index1 = chinaDatas.findIndex(item1 => item1[0].name === item.county)
    // 如果为-1说明并与数据数组中没有出现过这个区/县就value赋值为1 如果不为-1说明出现过就直接value++
    if (index1 === -1) {
      chinaDatas.push([{ "name": item.county, "value": 1 }])
    } else {
      chinaDatas[index1][0].value++
    }
  })
  // 调用折线图函数
  setLine(lineData)
  // 调用饼图函数
  setPie(pieData)
  // 调用迁徙图函数
  setMap(chinaGeoCoordMap, chinaDatas)
})

/* 
3.学生成绩列表
    柱状图 :  x轴：小组   y轴：分数成绩
*/
// 点击成就右侧三个点收放成绩选择
document.querySelector('.icon-youcecaidan').addEventListener('click', function () {
  document.querySelector('#batch').style.display === 'block' ? document.querySelector('#batch').style.display = 'none' : document.querySelector('#batch').style.display = 'block'
})

// 循环遍历选择第N次成绩按钮添加点击事件
document.querySelectorAll('#batch li').forEach((item, index) => {
  item.addEventListener('click', function () {
    // ajax发送get请求
    axios({
      method: 'get',
      url: '/score/batch',
      params: { batch: index + 1 }
    }).then(res => {
      // 响应请求
      console.log(res)
      // 调用柱状图函数
      setBar(res.data.data)
    })
  })
})
// 页面加载触发第1次成绩的点击事件
document.querySelector('#batch li').click()

// 封装折线图函数
const setLine = data => {
  // 3.1 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector('.line'));

  // 3.2 指定图表的配置项和数据
  const colors = ['#EE6666', '#5470C6'];
  let option = {
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    color: colors,
    legend: {},
    grid: {
      top: 70,
      bottom: 80
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: false
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return (
                'Precipitation  ' +
                params.value +
                (params.seriesData.length ? '：' + params.seriesData[0].data : '')
              );
            }
          }
        },
        // prettier-ignore
        data: data.names
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 30000,
        interval: 5000,
      }
    ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'circle',
        symbolSize: 0,
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: data.salarys
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'circle',
        symbolSize: 0,
        smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: data.truesalarys
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 10
      }
    ],
  }
  // 3.3使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

// 封装柱状图函数
const setBar = data => {
  // 3.1 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector('.barChart'));

  // 3.2 指定图表的配置项和数据
  let option = {
    // 左上角标题
    title: {
      text: '成绩 Score',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 鼠标移入样式
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    // 上方提示
    legend: {
      data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
    },
    // x轴
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: true
        },
        data: data.group
      },
    ],
    // y轴
    yAxis: [
      // 左边y轴
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        // y轴单位
        axisLabel: {
          formatter: '{value}分'
        },
        // 刻度点
        axisTick: {
          show: true
        },
        // 刻度线
        axisLine: {
          show: true
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        // y轴单位
        axisLabel: {
          formatter: '{value}人'
        },
        // 刻度点
        axisTick: {
          show: true
        },
        // 刻度线
        axisLine: {
          show: true
        }
      }
    ],
    series: [
      {
        // name要与legend中的值对应
        name: '平均分',
        type: 'bar',
        barWidth: '10%',
        // 柱子之间间隔
        barGap: 0.2,
        // stack: 相同的stack柱子会堆叠在一起
        // stack: '1',
        // 鼠标移入扣一个柱子 其他柱子会变淡
        emphasis: {
          focus: 'series'
        },
        data: data.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: '10%',
        // 值以右边y轴刻度为主
        yAxisIndex: 1,
        emphasis: {
          focus: 'series'
        },
        data: data.lt60
      },
      {
        name: '60到80分之间',
        type: 'bar',
        barWidth: '10%',
        yAxisIndex: 1,
        emphasis: {
          focus: 'series'
        },
        data: data.gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: '10%',
        yAxisIndex: 1,
        emphasis: {
          focus: 'series'
        },
        data: data.gt80
      },
    ]
  }

  // 3.3使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

// 封装饼图函数
const setPie = data => {
  // 3.1 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector('.pie'));

  // 3.2 指定图表的配置项和数据
  let option = {
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [20, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: data
      }
    ]
  };

  // 3.3使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

// 封装迁徙图函数
const setMap = (chinaGeoCoordMap, chinaDatas) => {
  // 3.1 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector('.map'));

  let planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

  let convertData = function (data) {
    let res = [];
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i];
      let fromCoord = chinaGeoCoordMap[dataItem[0].name];
      let toCoord = [114.3896, 30.6628]; // 目标点经纬度（武汉校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  let series = [];
  [['武汉校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 6,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'circle', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 6,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: 'red', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "red"
            }
          },
          emphasis: {
            show: true,
            color: "purple", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };

  // 3.3使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}